<template>
	<div class="zs-table-page-container">
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
			<span>
				<el-select filterable @change="queryList()" v-model="queryParams.projectCode" class="zs-select-md zs-space-right-sm" placeholder="项目" clearable>
					<el-option v-for="item in brandDownList" :key="item.projectCode" :label="item.projectName" :value="item.projectCode" />
				</el-select>
				<el-select :teleported="false" filterable @change="queryList()" v-model="queryParams.wtBrandName" class="zs-select-md zs-space-right-sm" placeholder="品牌名称" clearable>
					<el-option v-for="item in brandFirstBizTypes" :key="item.wtBrandName" :label="item.wtBrandName" :value="item.wtBrandName" />
				</el-select>
				<el-select v-model="queryParams.contractsStatus" class="zs-select-md zs-space-right-sm" multiple placeholder="合同状态" clearable @change="queryList" :teleported="false">
					<el-option v-for="item in contractsStatusList" :key="item.contractsStatus" :label="item.contractsStatus" :value="item.contractsStatus" />
				</el-select>
				<!-- <el-date-picker class="zs-space-right-sm" v-model="queryParams.startMonth" type="month" placeholder="权责开始月" value-format="YYYY-MM" @change="changeDate('start')" />
				<el-date-picker class="zs-space-right-sm" v-model="queryParams.endMonth" type="month" placeholder="权责结束月" value-format="YYYY-MM" @change="changeDate('end')" /> -->
				<el-popover popper-class="zs-popper" placement="bottom-end" trigger="click">
					<template #reference>
						<el-button class="zs-btn-square-solid" :class="{ 'zs-btn-square-solid-active': queryParams.buildingName || queryParams.floorsName || queryParams.bizMode.length > 0 }">
							<el-icon>
								<MoreFilled />
							</el-icon>
						</el-button>
					</template>
					<template #default>
						<el-select :teleported="false" filterable @change="queryList()" v-model="queryParams.buildingName" class="zs-select-md zs-space-right-sm" placeholder="楼栋" clearable>
							<el-option v-for="item in buildingList" :key="item.buildingName" :label="item.buildingName" :value="item.buildingName" />
						</el-select>
						<el-select :teleported="false" filterable @change="queryList()" v-model="queryParams.floorsName" class="zs-select-md zs-space-right-sm" placeholder="楼层" clearable>
							<el-option v-for="item in floorsList" :key="item.floorsName" :label="item.floorsName" :value="item.floorsName" />
						</el-select>
						<el-select :teleported="false" @change="queryList()" v-model="queryParams.bizMode" multiple class="zs-select-md zs-space-right-sm" placeholder="资产类型" clearable>
							<el-option v-for="item in bizModeList" :key="item.bizMode" :label="item.bizMode" :value="item.bizMode" />
						</el-select>
					</template>
				</el-popover>
				<el-button @click="queryList()" class="zs-btn-plain">查询</el-button>
			</span>
			<span>
				<el-button class="zs-btn-plain" @click="handleDownload">
					<el-icon class="el-icon--left"> <Upload /> </el-icon>导出
				</el-button>
			</span>
		</div>
		<div class="zs-card zs-table-page-content" :class="{'zs-table-first-row-special': queryParams.pageNum == 1}">
			<hsPageTable :loading="tableData.loading" :total="tableData.total" :tableData="tableData.data" :cloumns="tableData.cloumns" @pageChange="pageChange" :isHaveIndex="false" :cell-class-name="getCellClassName" :headerCellClass="getCellClassName"> </hsPageTable>
		</div>
	</div>
</template>

<script setup lang="jsx">
	import { downloadNewFile } from '@/utils/publicUtils';
	// import { ElMessage } from 'element-plus';
	import { toThousands } from '@/utils/number-util';
	// import detailApi from '@/api/Manage/Business/detailPages';
	import { getBrandNameDropdownApi, getBizModeDropdownApi, getDropDownListApi, getFloorsDropdownApi, getContractsStatusDropdownApi, getBuildingDropdownApi } from '@/api/SpecialReport/receivable';
	import { getDepositContractsListApi, getBondContractsExportApi } from '@/api/SpecialReport/netReceipts';
	import { reactive, ref } from 'vue';
	import { useRouter, useRoute } from 'vue-router';
	import { useStore } from 'vuex';
	let store = useStore();
	let router = useRouter();
	let route = useRoute();
	const curPageSize = ref(store.state.uiPageSizeDefault);
	// 查询条件
	let queryParams = reactive({
		projectCode: route.query.projectCode,
		format: '',
		// startMonth: '',
		// endMonth: '',
		contractsStatus: [],
		pageNum: 1,
		bizMode: [],
		pageSize: curPageSize,
		buildingName: '',
		floorsName: '',
		wtBrandName: '',
	});
	// 表格数据
	let tableData = reactive({
		loading: false,
		data: [],
		total: 0,
		cloumns: [
			{
				prop: 'index',
				label: '序号',
				width: '80',
				type: 'customMethods',
				methods: (a, empty, { $index }) => queryParams.pageNum == 1 ? ($index == 0 ? '合计' : $index + queryParams.pageSize * (queryParams.pageNum - 1)) : $index + 1 + queryParams.pageSize * (queryParams.pageNum - 1),
			},
			{
				prop: 'wtBrandName',
				label: '品牌名称',
				align: 'left',
				type: 'html',
				render: ({ row }) => {
					return (
						<span class="zs-link" onClick={() => jumpDetailPage(row)}>
							{row.wtBrandName}
						</span>
					);
				},
			},
			{
				prop: 'rentArea',
				label: '租赁面积',
				align: 'right',
				type: 'customMethods',
				methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'rentArea'),
			},
			{
				prop: 'depositRent',
				label: '租赁保证金',
				align: 'right',
				width: '130',
				type: 'customMethods',
				methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'depositRent'),
			},
			{
				prop: 'debtAmt',
				label: '全费项欠款',
				align: 'right',
				width: '130',
				type: 'customMethods',
				methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'debtAmt'),
			},
			{
				prop: 'debtRatio',
				label: '欠款比例',
				align: 'right',
				width: '130',
				type: 'customMethods',
				methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'debtRatio'),
			},
			{ prop: 'contractsStatus', label: '合同状态', width: '100', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'contractsStatus') },
			{ prop: 'conStartDate', label: '合同开始', width: '110', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'conStartDate') },
			{ prop: 'conEndDate', label: '合同结束', width: '110', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'conEndDate') },
			{ prop: 'contractsCode', label: '合同编号', align: 'center', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'contractsCode') },
			{ prop: 'customerName', label: '商户名称', align: 'left', minWidth: '200', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'customerName') },
			{ prop: 'customerType', label: '商户类型', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'customerType') },
			{ prop: 'relationCustomer', label: '关联单位', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'relationCustomer') },
			{ prop: 'isLitigation', label: '诉讼状态', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'isLitigation') },
			{ prop: 'conShopCode', label: '单元编号', align: 'left', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'conShopCode') },
			{ prop: 'floorsName', label: '楼层', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'floorsName') },
			{ prop: 'buildingName', label: '楼栋', minWidth: '100', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'buildingName') },
			{ prop: 'bizMode', label: '资产类型', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'bizMode') },
		],
	});

	function jumpDetailPage(row) {
		let query = {
			rTitle: '保证金统计表账单明细',
			projectCode: row.projectCode,
			wtBrandName: row.wtBrandName,
			wtBrandId: row.wtBrandId,
			contractsCode: row.contractsCode,
			conShopCode: row.conShopCode,
			rTime: new Date().getTime(),
		};
		router.push({
			path: '/SpecialReport/bond/collectionList',
			query,
		});
	}

	function rowMethods(row, index, empty, key) {
		if (row[key]) {
			if (['rentArea', 'depositRent', 'debtAmt'].includes(key)) {
				return row[key] ? toThousands(Number(row[key]).toFixed(2)) : empty;
			} else {
				return row[key] || empty;
			}
		} else {
			if (index == 0) return '';
			return empty;
		}
	}

	// 分页变化
	function pageChange(page) {
		queryParams.pageNum = page.current;
		queryParams.pageSize = page.pageSize;
		queryList();
	}
	async function queryList() {
		// if ((queryParams.startMonth && !queryParams.endMonth) || (!queryParams.startMonth && queryParams.endMonth)) {
		// 	ElMessage.warning('请选择权责开始结束月份');
		// 	return;
		// }
		tableData.loading = true;
		let params = Object.assign({}, queryParams);
		const res = await getDepositContractsListApi(params);
		let resData = res.data;
		if (resData.errorCode == 200 && resData.data.contractsList != null && resData.data.contractsList.length > 0) {
			if (queryParams.pageNum == 1) {
				let sumObj = {
					debtAmt: resData.data.debtAmtTotal,
					depositRent: resData.data.depositRentTotal,
				};
				resData.data.contractsList.unshift(sumObj);
			}
			tableData.data = resData.data.contractsList;
			tableData.total = resData.totalCount;
		} else {
			tableData.data = [];
			tableData.total = 0;
		}
		tableData.loading = false;
	}
	queryList();

	let brandDownList = ref([]);
	function getBrandDownList() {
		getDropDownListApi().then(res => {
			let resData = res.data;
			if (resData.code == 200) {
				brandDownList.value = resData.data.projectDropdownRespList;
			}
		});
	}
	getBrandDownList();

	const getCellClassName = ({ columnIndex }) => {
		if ([5, 13].includes(columnIndex)) {
			return 'zs-table-cell-border-right';
		}
	};

	let brandFirstBizTypes = ref([]);
	let bizModeList = ref([]);
	let contractsStatusList = ref([]);
	let buildingList = ref([]);
	let floorsList = ref([]);
	function getBrandfirstBizType() {
		// 品牌
		getBrandNameDropdownApi({ projectCode: route.query.projectCode }).then(res => {
			let resData = res.data;
			if (resData.errorCode == 200) {
				brandFirstBizTypes.value = resData.data;
			}
		});
		// 资产类型
		getBizModeDropdownApi().then(res => {
			let resData = res.data;
			if (resData.errorCode == 200) {
				bizModeList.value = resData.data;
			}
		});
		// 合同状态
		getContractsStatusDropdownApi().then(res => {
			let resData = res.data;
			if (resData.errorCode == 200) {
				contractsStatusList.value = resData.data;
			}
		});
		// 楼栋
		getBuildingDropdownApi({ projectCode: route.query.projectCode }).then(res => {
			let resData = res.data;
			if (resData.errorCode == 200) {
				buildingList.value = resData.data;
			}
		});
		// 楼层
		getFloorsDropdownApi({ projectCode: route.query.projectCode }).then(res => {
			let resData = res.data;
			if (resData.errorCode == 200) {
				floorsList.value = resData.data;
			}
		});
	}
	getBrandfirstBizType();

	//导出
	const handleDownload = async () => {
		let params = Object.assign({}, queryParams);
		params.brandId = params.brandId || 'all';
		params.firstFormat = params.firstFormat || 'all';
		const fileName = `保证金统计表明细.xls`;
		let fileData = await getBondContractsExportApi(params);
		downloadNewFile(fileData.data, fileName);
	};
</script>

<style lang="scss" scoped>
	:deep(.el-table__row .zs-link) {
		cursor: pointer !important;
	}
</style>
